{% extends "/shared/layout.html" %}
{% block mainContent %}
 <div class="header">
  <div class="wrapper">
    <ul>
     <li>
       {% include '/game/game_summary_partial.html' %}
     </li>
     <li>
       <div class="g_info">
          <h1 class="gameName"></h1>
          <label>{{pageRes.lblStartDate}}：</label>
          <select id="year"></select>{{layoutRes.unitYear}}
          <select id="month"></select>{{layoutRes.unitMonth}}
          <select id="day"></select>{{layoutRes.unitDay}}<br/>
          <label>{{pageRes.lblKM}}：</label><span id="mapLength" class="h1"></span>{{layoutRes.unitKM}}<br/>
          <a id="btnCreate" class="button" href="###">{{pageRes.btnCreateGame}}</a>
       </div>
     </li>
   </ul>
  </div>
</div>
<div class="wrapper">
  <div class="game_map mapContent">
    <input id="mapId" type="hidden" value="{{map_id}}" />
      <div class="map">
        <ul>
          {% for map_obj in map_list %}
          <li map-id="{{map_obj.map_id}}" map-length="{{map_obj.map_length}}" style="background-image: url('../static/images/maps/{{map_obj.map_picture}}')">
              <div class="map_title"><span class="map_name">{{map_obj.map_name}}</span><span class="map_sub_title"> {{map_obj.map_content}}</span></div>
            </li>
          {% endfor %}
        </ul>
      </div>
  </div>
</div>
<script type="text/javascript" src="../static/scripts/views/game/etlinking.views.mapGame.js"></script>
<script type="text/javascript">
  $(function() {
    nsbase.views.mapGame.init();
  });
</script>
{% endblock %}